<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            width: 60%;
            height: 600px;
            background: #337ab7;
            opacity: .6;
            border-radius: 5px;
            margin: 50px auto;
            padding: 20px;
        }
    </style>
    <script src="./jquery.js"></script>
</head>
<body>
    <div class="container">
        <form class="" report-submit="false" >
            <input type="checkbox" name="一" id="chk1"><label for="">选项一</label>
            <input type="checkbox" name="二" id="chk2"><label for="">选项二</label>
            <input type="checkbox" name="三" id="chk3"><label for="">选项三</label>
        </form>
        <input type="checkbox" name="全选" id="chk"><label for="chk">全选</label>
    </div>
    <script>
    $(function(){
        var $chk = $("#chk");
        $("#chk").click(function(){
            if($chk.prop("checked") == true){
                $("form :checkbox").prop("checked",true)
            } else {
                $("form :checkbox").prop("checked",false)
            }
        })

        $("form :checkbox").click(function(){
            if($("form :checked").length == $("form :checkbox").length){
                $chk.prop("checked",true)
            } else {
                $chk.prop("checked",false)
            }
        })
    })
    </script>
</body>
</html>